<!--
 * @Description: 弹窗表格
 * @Author: huacong
 * @Date: 2020-11-04 11:15:34
 * @LastEditTime: 2020-11-30 12:36:23
 * @LastEditors: huacong
-->
<template lang="pug">
  el-dialog.tl(
    :title="title"
    :width="width"
    :visible="visibleDialog"
    v-loading="loading"
    element-loading-text="加载中."
    element-loading-background="rgba(255, 255, 255, 0.7)"
    element-loading-customClass="v-loading"
    append-to-body
    center
    destroy-on-close
    v-el-drag-dialog
    @close="$_handleCancel"
  )
    slot(name="alert")
    el-row(:gutter="24")
      el-col(:span="formSpan")
        form-box(
          ref="formBox"
          v-if="visibleDialog"
          @cancelHandle="$_handleCancel"
          :reset="false"
          cancelText="取消"
          v-bind="$attrs"
          v-on="$listeners"
        )
      el-col(:span="24 - formSpan"  v-if="formSpan !== 24")
        slot(name="right")
    slot
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
import FormBox from './FormBox'

export default {
  name: 'ModalForm',
  components: {
    FormBox
  },
  directives: { elDragDialog },
  props: {
    visible: [Boolean],
    title: {
      type: String,
      default: '弹窗'
    },
    width: {
      type: String,
      default: '480px'
    },
    // 表单的栅格
    formSpan: {
      type: Number,
      default: 24
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      sureDisabled: false
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    // 对外抛出cancel事件
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
